<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="<%=request.getContextPath()%>/css/booklist.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            initBookList(1);
        });

        function initBookList(pageIndex){
            var bookName = $("#bookName").val();
            var sortId;
            if(${param.sortId>0}){
                sortId = ${param.sortId};
            }else{
                sortId =0;
            }
            $.getJSON("../getBooks"
                    ,{"sortId":sortId,"bookName":bookName,"pageIndex":pageIndex}
                    ,showBooks);//书籍的查询结果 转成一个 json 对象
        }
        function showBooks(data){
            var list = $("#bookList").empty();

            $(data.list).each(function(){
                var iSBNStr = (this.bookIsbn.length>6)?this.bookIsbn.substring(0,6)+"...":this.bookIsbn;
                var bookNameStr = (this.bookName.length >4) ? this.bookName.substring(0,4)
                    +"...":this.bookName; //书籍名称太长的话就换成...
                var htmlStr = "<ul> <li id=\"tit\"> <input type=\"checkbox\" name=\"selectBook\" value=\""+this.id+"\" /></li>" +
                    "<li>"+this.bookId+"</li>" +
                    "<li>"+bookNameStr+"</li>" +
                    "<li>"+ iSBNStr +"</li>" +
                    "<li>"+this.bookAuthor+"</li>" +
                    "<li>"+this.bookSort+"</li>" +
                    "<li>"+this.sort_name+"</li>" +
                    "<li>"+this.bookPub+"</li>" +
                    "<li>"+this.bookPubLocation+"</li>" +
                    "<li>"+this.bookPubYear+"</li>" +
                    "<li>"+this.bookTotal+"</li>" +
                    "<li id=\"caoz\"><a href=\"#\" onclick=\"deleteBooks("+this.id+")\"> <img src=\"../image/del.gif\" width=\"16\" height=\"16\" />删除</span></a>"+
                    "</li></ul>";
                list.append(htmlStr);
            });

            //分页
            var pageDiv = $("#ztai2").empty();

            htmlStr = "<div id=\"tji\">&nbsp;&nbsp;共有 " + data.totalCount + "条记录，当前第 "+data.currPageNo+"/"+data.totalPageCount+"</div>";
            htmlStr += "<div id=\"fpg\"><ul>";
            if(data.currPageNo > 1){
                htmlStr +=  "<li><input type=\"image\" src=\"../image/first.gif\" onclick=\"initBookList(1)\"/></li>" ;
                htmlStr += "<li><input type=\"image\" src=\"../image/back.gif\" onclick=\"initBookList("+(data.currPageNo-1)+")\"/></li>";
            }
            if(data.currPageNo < data.totalPageCount){
                htmlStr += "<li><input type=\"image\" src=\"../image/next.gif\" onclick=\"initBookList("+(data.currPageNo+1)+")\"/></li>";
                htmlStr += "<li><input type=\"image\" src=\"../image/last.gif\" onclick=\"initBookList("+(data.totalPageCount)+")\"/></li>";
            }
            htmlStr +=  "<li>转到第</li>" +
                "<li id=\"page\"><input type=\"text\" value=\"\" name=\"iname\" class=\"iname\" id=\"pageNo\"/></li>" +
                "<li id=\"page\">页</li>" +
                "<li id=\"zhuan\"><input type=\"image\" src=\"../image/go.gif\" onclick=\"goToPage()\"/></li>" +
                "</ul>" +
                "</div>" +
                "</div>";
            pageDiv.append(htmlStr);
        }

        function goToPage(){
            initBookList($("#pageNo").val());
        }

        function search(){
            initBookList(1);
        }

        /*批量选中*/
        function selectAll(obj){
            if($(obj).is(':checked')){
                $("input:checkbox").each(function(){
                    $(this).prop("checked",true);
                })

            }else{
                $("input:checkbox").each(function(){
                    $(this).prop("checked",false);
                })
            }
        }
        /*批量删除*/
        function deleteBooks(id){
            var idList = [];//定义一个空数组
            if(typeof(id) == "undefined"){
                //批量删除
                if(confirm("您确定要批量删除吗？")){
                    $("input[name='selectBook']:checked").each(function(i){//把所有被选中的复选框的值存入数组
                        idList[i] =$(this).val();
                    });
                }else{
                    return;
                }
            }else{
                if(confirm("请确定要删除该书籍吗？")){
                    //删除指定的书籍
                    idList[0] = id;
                }else{
                    return;
                }
            }
            $.ajax({
                type:'post',
                url:'../deleteBook' ,
                dataType: 'json',
                traditional:true,
                data: {"ids":idList},
                success:function(data){
                    alert(data.message);
                    if(data.result==1){
                        initBookList(1);
                    }
                }
            });
        }

    </script>
</head>
<body style="background:#fff;">
<div class="list">

    <div id="ztai">
        <form action="">
            <div id="cx"><ul>
                <li>书籍名称：</li>
                <li id="wenben"><input type="text" id="bookName"/></li>
                <li><input type="button" value="查询" class="ann" onclick="search()"/></li>
            </ul></div>
        </form>
        <div class="ins">
            <ul>
                <a href="bookinfoadd.jsp" target="_self"><li id="dele">新增</li></a>
                <a href="" onclick="deleteBooks()"><li>批量删除</li></a>
            </ul>
        </div>
    </div>

    <ul id="biti">
        <li id="tit"> <input type="checkbox" name="selectall" value="" onclick="selectAll(this)"/></li>
        <li>序号</li>
        <li>书籍名称</li>
        <li>ISBN</li>
        <li>书籍著者</li>
        <li>分类号</li>
        <li>分类名称</li>
        <li>出版单位</li>
        <li>发行地</li>
        <li>出版时间</li>
        <li>馆藏数</li>
        <li id="caoz">基本操作</li>
    </ul>
    <div id="bookList">
        <!--书籍列表-->
        <c:forEach var="book" items="${list}">
            ${bool.bookId}
        </c:forEach>
    </div>
    <div id="ztai2">
        <!--分页-->
    </div>
</body>
</html>
